<template>
    <div class="background-image">
        <div class="content">
            <div class="main">
                <div class="left">
                    <!-- 左侧内容 -->
                </div>
                <div class="right">
                    <div class="top">
                        <div class="big">
                            <li>设置新密码</li>
                        </div>
                        <div class="small">
                            <li class="li1"><router-link to="/login"><span>返回首页</span></router-link></li>
                        </div>
                    </div>
                    <div class="con">
                        <form @submit.prevent="validate" class="form">
                            <div class="text">
                                <table class="table">
                                    <tr>
                                        <div class="input-container">
                                            <img src="../../assets/password.png" alt="Image">
                                            <input v-model="newPassword" type="password" placeholder="请输入您的新密码">
                                        </div>
                                    </tr>
                                    <tr>
                                        <div class="input-container">
                                            <img src="../../assets/password.png" alt="Image">
                                            <input v-model="confirmPassword" type="password" placeholder="请确定您的新密码">
                                        </div>
                                    </tr>
                                </table>
                                <input type="submit" value="确 认" class="login"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      newPassword: '',
      confirmPassword: ''
    };
  },
  methods: {
    validate() {
      // 这里可以添加验证逻辑
      if (this.newPassword !== this.confirmPassword) {
        alert('两次输入的密码不一致！');
        return;
      }
      // 验证通过后，可以在这里发送请求到服务器
      alert('密码重置成功');
      this.$router.push('/login2');
    }
  }
};
</script>

<style scoped>
    .background-image {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        position: fixed;
        top: 0;
        left: 0;
        background-color: #fff; /* 背景色，可根据需要调整 */
        z-index: 0; /* 背景层 */
    }

        .background-image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("../../assets/Register_bg.jpg") center/cover no-repeat;
            z-index: -1; /* 确保伪元素在背景层之下 */
            filter: blur(8px);
        }

    .content {
        display: flex; /* 使.content成为flex容器 */
        justify-content: center; /* 水平居中main元素 */
        align-items: center; /* 垂直居中main元素 */
        height: 100%; /* 使.content的高度占满其父元素 */
        /* 如果需要，可以设置width: 100%来使.content宽度占满其父元素 */
    }

        .content .main {
            width: 1000px;
            height: 600px;
            background-color: #FFFFFF;
            border-radius: 10px;
        }

            .content .main .left {
                margin: 0;
                padding: 0;
                width: 55%;
                height: 100%;
                background-image: url("../../assets/Register_bg.jpg");
                background-size: cover;
                background-position: 65%; /* 将背景图片重点内容向右对齐 */
                border-top-left-radius: 10px; /* 左上角的圆角大小 */
                border-bottom-left-radius: 10px; /* 左下角的圆角大小 */
                float: left;
                /* overflow: hidden; */
            }

            .content .main .right {
                width: 45%;
                height: 100%;
                float: left;
            }

                .content .main .right .top {
                    width: 100%;
                    height: 20%;
                    border-bottom: 1px solid #4a4a4a;
                }

                    .content .main .right .top li {
                        list-style: none;
                    }

                    .content .main .right .top .big {
                        width: 50%;
                        height: 100%;
                        float: left;
                    }

                        .content .main .right .top .big li {
                            display: block;
                            padding-top: 30%;
                            padding-left: 10%;
                            font-size: 40px;
                            color: #00A2E8;
                        }

                    .content .main .right .top .small {
                        width: 20%;
                        height: 100%;
                        float: right;
                    }

                        .content .main .right .top .small li {
                            display: block;
                            padding-top: 105%;
                            padding-left: 10%;
                            font-size: 18px;
                            color: gray;
                        }

    a {
        text-decoration: none; /* 去除下划线 */
        color: gray; /* 设置链接颜色，可以是任何你想要的颜色 */
    }

        a:visited {
            color: gray; /* 访问过的链接颜色保持不变 */
        }

    .con {
        float: left;
        margin-top: 110px;
        margin-left: 25%;
    }

    .input-container {
        position: relative;
        display: flex;
        align-items: center;
    }

        .input-container input {
            flex-grow: 1;
            padding-left: 40px; /* 确保有足够的空间显示图片 */
            width: 180px;
            padding-top: 10px;
            /* padding-right: 10px; */
            padding-bottom: 10px;
            border: none;
            border-radius: 4px;
            box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.2);
            outline: none;
            color: dimgray;
            margin-bottom: 25px;
        }

        .input-container img {
            position: absolute;
            left: 10px; /* 调整图片位置 */
            top: 30%;
            transform: translateY(-50%);
            height: 20px; /* 调整图片大小 */
            width: auto;
        }

    .login {
        margin-top: 25%;
        /* padding: 8px 50px; */
        padding-left: 40px;
        padding-right: 30px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        float: left;
        margin-left: 10%;
        font-size: 25px;
        background-color: #00A2E8;
        color: #FFFFFF;
        border-radius: 10px;
        border: 1px;
        font-weight: bold;
        letter-spacing: 20px;
    }

        .login:hover {
            box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
            background-color: #9ED3F0;
            color: black;
            font-weight: bolder;
        }

</style>
